<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Annotorious</title>
    <style>
      html, body {
        background-color: #cfcfcf;
        margin: 0;
        padding: 0;
      }

      #content {
        background-color: #fff;
        box-sizing: border-box;
        margin: 0 auto;
        max-width: 900px;
        min-height: 100vh;
        padding: 30px;
        position: relative;
      }

      #content img {
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="content">
      <img id="sample-image" src="640px-Hallstatt.jpg" />
    </div>

    <script type="module">
      import { createImageAnnotator, W3CImageFormat } from './index.ts';

      window.onload = function() {
        var anno = createImageAnnotator('sample-image', {
          adapter: W3CImageFormat('sample-image'),
          autoSave: true,
          style: function(annotation) {
            return annotation.target.selector.type === 'RECTANGLE' 
              ? { fillOpacity: 0 } 
              : { fill: 'blue' };
          }
        });

        // anno.loadAnnotations('./annotations.w3c.json');
        // anno.loadAnnotations('./annotations.core.json');
      
        anno.on('createAnnotation', function (annotation) {
          console.log('created', annotation);
        });

        anno.on('updateAnnotation', function(annotation, previous) {
          console.log('updated', previous, 'with', annotation);
        });

        anno.on('deleteAnnotation', function(annotation) {
          console.log('deleted', annotation);
        });

        anno.on('selectionChanged', function(selected) {
          console.log('selected', selected);
        });

        anno.on('mouseEnterAnnotation', function(annotation) {
          // console.log('enter', annotation);
        });

        anno.on('mouseLeaveAnnotation', function(annotation) {
          // console.log('leave', annotation);
        });

        anno.setDrawingTool('polygon');

        document.addEventListener('keydown', evt => {
          if (evt.key === 'Escape')
            anno.cancelDrawing();
        });

        // Make it global, so we can manipulate in the browser console.
        window.anno = anno;
      }
    </script>
  </body>
</html>
